<template>
	<view class="container">
		<navbar title="确认订单" :background="background" :bgSize="bgSize" color='#fff'></navbar>
		<view class="bg">
			<image :src='hostUrl+"/static/img/sure-order-bg.png"'>
			</image>
		</view>
		<view class="wrap">
			<!-- 收货人信息 -->
			<view class="delivery_info">
				<view class="have-address-wrap line_h_center" v-if="address_detail != ''" @tap="edit_address()">
					<view class="have-address-left">
						<view class="address">
							{{address_detail.detail}} {{address_detail.address}}
						</view>
						<view class="info">
							<text>{{address_detail.contact}}</text>
							<text class="mobile">{{address_detail.mobile}}</text>
						</view>
					</view>
					<uni-icons type='right' color="#000" size="20"></uni-icons>
				</view>
				<view @tap="edit_address()" v-else class="no-address">
					<image
						src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/bc8be6c3efeee4a8a371f98bc1c2b657d16221d8.png"
						mode=""></image>
						<view class="tip">添加收货地址</view>
				</view>
				<image class="bot"
					src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/a63601fe6f6dac40825ea04a71d7403383a0ec04.png"
					mode=""></image>
			</view>
			<!-- 商品信息 -->
			<view class="shop_info" v-for="(item,index) in shop_list" :key="index">
				<view class="info">
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="info_content">
					<text class="tit">{{item.goodname}}</text>
					<view class="price">
						<text>¥<text class="money">{{ item.price}}</text> </text>
						<!-- <text>¥<text class="money">{{ item.id_dividend == 1? item.price : item.discountPrice}}</text> </text> -->
						<text>x{{item.num}}</text>
					</view>
				</view>
			</view>
			<!-- 实付款 -->
			<view class="pay">
				<view class="pay_money">
					<text>商品金额</text>
					<text>￥{{order_detail.totalMoney}}</text>
				</view>
				<view class="pay_money" v-if="pick_status != 1">
					<text>运费</text>
					<text>¥ {{order_detail.fee}}</text>
				</view>
				<view class="pay_moneys">
					<text>合计： <text class="price">¥ {{order_detail.finalPayMoney}}</text></text>
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="pay_type">
				<text class="tit">支付方式</text>
				<view class="wechat_pay" @click="pays_wechat">
					<view class="wechat_payimg">
						<image
							src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/7a84c367737035a83bcab6809b628cdd09faa6a7.png"
							mode=""></image>
						<text>微信支付</text>
					</view>
					<view class="radio-content">
						<view class="radio-content">
							<view class="radio" :class="radio_wechat == 1 ? 'radio-default':''">
								<view :class="radio_wechat == 1 ? 'radio-active':'radio-active-add'"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="notes-wrap">
				<view class="notes-item">
					<label>备注</label>
					<input type='text' placeholder="建议备注前先于商家沟通确认" v-model="remark" />
				</view>
			</view>
			<!-- 实名认证 -->
			<view class="notes-wrap" v-if='is_auth_form == 1'>
				<view class="notes-item notes-item1">
					<label>姓名</label>
					<input type='text' placeholder="请输入您的真实姓名" v-model="real_name" />
				</view>
				<view class="notes-item">
					<label>身份证</label>
					<input type='text' placeholder="请输入您的身份证号码" v-model="id_number" />
				</view>
			</view>
		</view>
		<!-- 订单按钮 -->
		<view class="order_btn">
			<view class="order-btn-wrap">
				<view class="price_box">
					<text>¥<text class="money" v-if="pick_status != 1">{{order_detail.finalPayMoney}}</text><text
							class="money" v-else>{{order_detail.totalMoney}}</text></text>
					<text class="num" v-if="pick_status != 1">含运费:¥{{order_detail.fee}}</text>
				</view>
				<view class="btn btns line_center" @tap="comfire_pay()" v-if="pay_status == true">
					确认支付
				</view>
				
				<view class="btn disabled-btn line_center" v-else>
					确认支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				background: `url(${app.globalData.hostUrl}/static/img/sure-order-bg.png)`,
				bgSize: '100% 400rpx',
				params: {
					data: {
						g_id: '',
						nums: 1
					},
					payType: 1,
				},

				params_car: {
					data: '',
					payType: 2,
				},

				order_detail: '',
				shop_list: '',
				address_id: '',
				address_detail: '',
				order_type: '',
				pay_status: true,
				// 自提商店
				pick_status: '',
				self_pickup: '',
				self_pickup_address: '',
				radio_wechat: 1,
				radio_offline: 1,

				paymethod: 0,
				puah_name: '',
				puah_mobile: '',

				is_auth_form: 0,
				real_name: '',
				id_number: '',
				remark: '',
				parent_u_sn: ''
			};
		},
		onLoad(opt) {
			this.order_type = opt.type
			if (opt.type == 1) {
				this.params.data.g_id = opt.good_id
				this.params.data.nums = opt.num
			} else if (opt.type == 2) {
				this.params_car.data = opt.car_id
			}
			this.parent_u_sn = getApp().globalData.parent_sn;
			// this.params_car.parent_u_sn = getApp().globalData.parent_sn
			this.product_order()
		},
		onShow() {
			uni.$on('checkPickUp', (data) => {
				this.self_pickup_address = data
			})
		},
		methods: {
			// 当前自提点
			history_list() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.historyList,
					method: 'get'
				}).then(res => {
					if (res.code == 0) {
						that.self_pickup_address = res.data.last_point
					}
				}).catch(err => {

				})
			},

			// 选择自提点
			add_pickup() {
				uni.navigateTo({
					url: '/pages/user/pickup_address/pickup_address'
				})
			},
			pays_wechat() {
				if (this.radio_wechat == 0) {
					this.radio_offline = 0
					this.radio_wechat = 1
					this.paymethod = 1
				}
			},
			pays_offline() {
				if (this.radio_offline == 0) {
					this.radio_offline = 1
					this.radio_wechat = 0
					this.paymethod = 0
				}
			},
			// 商品自提地址的获取
			// pick_up_address(){
			// 	let that = this;
			// 	app.globalRequest({
			// 		api: app.getApi().user.getStoreAddress,
			// 		data:{
			// 			id_dividend: that.pick_status
			// 		}
			// 	}).then(res => {
			// 		if (res.code == 0) {
			// 			that.self_pickup_address = res.data;
			// 		}
			// 	}).catch(err => {

			// 	})
			// },
			// 编辑地址
			edit_address() {
				uni.navigateTo({
					url: '/pages/user/address/address?type=1'
				})
			},

			// 获取选择地址的id
			getValue(id) {
				this.address_id = id

				let that = this;
				app.globalRequest({
					api: app.getApi().user.addressDetail,
					data: {
						address_id: that.address_id
					}
				}).then(res => {
					if (res.code == 1) {
						that.address_detail = res.data;
					}
				}).catch(err => {

				})
			},

			// 商品预订单显示
			product_order() {
				let that = this;
				app.globalRequest({
					api: app.getApi().goodsdata.productOrder,
					method: 'post',
					data: {
						params: that.order_type == 1 ? that.params : that.params_car
					}
				}).then(res => {
					if (res.code == 1) {
						that.pick_status = res.data.orderGoodItem[0].id_dividend;
						that.is_auth_form = res.data.is_auth_form;
						if (that.pick_status == 1) {
							// that.pick_up_address()
						}
						that.order_detail = res.data
						that.address_detail = res.data.defaultAddress
						that.shop_list = res.data.orderGoodItem
						that.params.address_id = address_detail.address_id
					}
				}).catch(err => {

				})
			},

			// 确认支付
			comfire_pay() {
				let that = this;
				console.log(this.self_pickup_address)
				if (that.is_auth_form == 1) {
					if (!that.real_name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
						return;
					}
					if (!that.id_number) {
						uni.showToast({
							title: '请输入身份证号码',
							icon: 'none'
						})
						return;
					}
				}
				that.pay_status = false;
				if (that.order_type == 1) {
					that.params.parent_u_sn = that.parent_u_sn;
					that.params.address_id = that.address_detail.address_id;
					that.params.is_auth_form = that.is_auth_form;
					that.params.real_name = that.real_name;
					that.params.id_number = that.id_number;
					that.params.remark = that.remark;
				} else {
					that.params_car.parent_u_sn = that.parent_u_sn;
					that.params_car.address_id = that.address_detail.address_id;
					that.params_car.is_auth_form = that.is_auth_form;
					that.params_car.real_name = that.real_name;
					that.params_car.id_number = that.id_number;
					that.params_car.remark = that.remark;
				}
				app.globalRequest({
					api: app.getApi().goodsdata.orderBuys,
					method: 'post',
					data: {
						params: that.order_type == 1 ? that.params : that.params_car,
					}
				}).then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: `${res.data.timestamp}`,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/user/my-order/my-order'
									})
									that.pay_status = true
								}, 1000)
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
								that.pay_status = true
							}
						})
					}
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							that.pay_status = true
						}, 1000)
					}
				}).catch(err => {

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {}

	.bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		left: 0;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrap {
		margin: 0 24rpx;
		padding-bottom: 200rpx;
	}

	.delivery_info {
		max-height: 232rpx;
		padding: 30rpx 28rpx 30rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
		border-radius: 16rpx;
		background-color: #fff;
		position: relative;

		.have-address-wrap {
			justify-content: space-between;
		}

		.have-address-left {
			flex: 1;
			margin-right: 56rpx;
		}

		.address {
			color: #323233;
			font-size: 28rpx;
			display: flex;
			font-weight: bold;
			line-height: 48rpx;
		}

		.info {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			padding-top: 26rpx;

			.mobile {
				margin-left: 30rpx;
				color: #8C8C8C;
			}
		}

		.no-address {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.tip{
				color:#999;
				padding-top: 10rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.bot {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 10rpx;
			width: 100%;
		}
	}

	.shop_info {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;

		.info {
			width: 176rpx;
			height: 176rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.info_content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 176rpx;
			width: 68%;

			.tit {
				color: #000000;
				font-size: 28rpx;
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					color: #323233;
					font-size: 28rpx;

					.money {
						color: #323233;
						font-size: 32rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.pay {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 4rpx;
		margin-top: 24rpx;

		.pay_money {
			padding: 0 24rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;

			text {
				font-size: 28rpx;
				color: #333;
			}

			.price {
				color: #FF5040;
			}
		}

		.pay_moneys {
			padding: 0 28rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.price {
				color: #FF5040;
			}
		}
	}



	.order_btn {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index:222;
		.order-btn-wrap{
			width: 100%;
			height: 100%;
			padding:0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.price_box {
			display: flex;
			flex-direction: column;
			text {
				color: #FF5040;
				font-size: 28rpx;

				.money {
					font-size: 48rpx;
					margin-left: 10rpx;
				}
			}

			.num {
				font-size: 20rpx;
				color: #bec0c2;
			}
		}



		.btn {
			width: 220rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}

		.btns {
			background: $dis-liner-color;
			color:#fff;
		}
		.disabled-btn{
			background-color: #f5f5f5;
			color: #333;
		}
	}

	.pay_type {
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;

		.tit {
			color: #333333;
			font-size: 28rpx;
			height: 100rpx;
			padding: 0 28rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #eee;
		}

		.wechat_pay,
		.offline_pay {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx 0;
			box-sizing: border-box;

			.wechat_payimg,
			.offline_payimg {
				display: flex;
				align-items: center;

				image {
					width: 45rpx;
					height: 39rpx;
				}

				text {
					font-size: 28rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}
		}

		.offline_pay {
			margin-top: 0;
			padding: 30rpx 0 30rpx;

			.offline_payimg {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

		}
	}


	.radio-content {
		display: flex;
		align-items: center;

		.col {
			color: #B38E65;
		}
	}

	.radio {
		padding: 4rpx;
		box-sizing: border-box;
		border-radius: 50%;
		border: 2rpx solid #CCCCCC;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0rpx 15rpx;
	}

	.radio-active {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #EC1818;
	}

	.radio-active-add {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #fff;
	}


	.radio-default {
		border: 2rpx solid #EC1818;
	}

	.notes-wrap {
		margin-top: 24rpx;
		border-radius: 16rpx;

		.notes-item {
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 28rpx;

			label {
				padding-right: 14rpx;
			}

			input {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				text-align: right;
			}
		}

		.notes-item1 {
			border-bottom: 2rpx solid #eee;
		}
	}
</style>